<!-- 登录页面 -->
<template>
  <div class="login">
    <div class="login_cht">
      <div class="loginMain">
        <div class="mainLeft"></div>

        <div class="mainRight">
          <div class="loginMainDiv">
            <div style="
                background-color: #ffffff;
                border-radius: 22px 22px 0px 0px;
              ">
       
            </div>
            <!-- 登录模式 -->
            <div class="loginMode">
              <h1 style="margin-top: 21px; color: #ff8f33">{{ title }}</h1>
            </div>
            <!-- <div style="text-align: center;">
                            版本号 1.0.1 3月30日
                        </div> -->

            <div class="inputDiv" style="margin-top: 21px">
              <el-input size="large" v-model="loginFrom.phone" placeholder="账号" class="LoginUsernameInput">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>

              <el-input size="large" v-model="loginFrom.password" show-password type="password" placeholder="密码"
                class="LoginUsernameInput">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </div>

            <div class="registerTarget">
              <el-checkbox v-model="checked2" disabled><span style="font-size: 16px">七日内免登录</span>
              </el-checkbox>
              <el-popover placement="top" trigger="hover" :width="300">
                <template #reference>
                  <div class="text-primary" style="line-height: 30px; cursor: pointer; font-size: 14px">
                    app扫码下载
                  </div>
                </template>

                <div style="display: flex;">
                  <div>

                   
                    <div style="width: 100%; text-align: center">安卓</div>
                  </div>

                  <div>
             
                    <div style="width: 100%; text-align: center">苹果</div>
                  </div>
                </div>

              </el-popover>
            </div>

            <el-button type="primary" @click="login()" @keyup.enter="login()" v-throttle class="loginButton"
              round>登录/LOGIN</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ComponentInternalInstance,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import { onBeforeRouteLeave, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Base64 } from "js-base64";
import API from "@/network/api";
import app from "../../public/app/aplication"

const store = useStore();
const title = import.meta.env.VITE_APP_TITLE;
const pngcal=(e:any)=>{
  if(e=='android'){
    return app.android
  }else{
    return app.ios

  }
}
//  poxy 为全局实例化对象
const proxy: any = (getCurrentInstance() as ComponentInternalInstance).proxy;

let loginFrom = reactive({
  phone: "",
  password: "",
});

let checked2 = ref(true);

// const router = useRouter();
onMounted(async () => {
  window.addEventListener("keydown", keyDown);
  const token = localStorage.getItem("Authorization");
  console.log(token);
  var query = proxy.$route.query;
  console.log(query);
  // debugger;
  if (token) {
    ElMessageBox.confirm("系统检测到登录记录，是否使用token登录？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        let reslut = await proxy.$api.user.checkToken();
        if (reslut.code == 200) {
          store.commit("SET_USERINFO", reslut.data.uUser);
          ElMessage.success("登录成功");

          hanlderUserCenterMeun(reslut.data.menuList);

          // router.push("home")
        }
      })
      .catch(() => { });
  }
});

onBeforeRouteLeave(() => {
  window.removeEventListener("keydown", keyDown);
});

const keyDown = (e: any) => {
  if (e.keyCode == 13) {
    login();
  }
};

const hanlderUserCenterMeun = (menuList: string) => {

  router.push('home');
};

const login = async () => {
  router.push('home');

};
</script>

<style scoped lang="scss">
@import "../assets/css/lib/_mixin.scss";

.loginButton {
  margin-top: 51px;
  height: 38px;
  width: 80%;
  margin-left: 10%;
  border-radius: 40px;
}

.registerTarget {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  font-size: 20px;
  width: 80%;
  margin-left: 12%;
  margin-top: 27px;
}

.inputDiv {
  font-size: 20px;
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
  text-align: left;
}

.loginMainDiv {
  width: 432px;
  height: 556px;
  background: #ffffff;
  border-radius: 22px 22px 22px 22px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}

.mainLeft {
  height: 100%;
  flex: 3;
}

.loginMode {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: -4%; */
  /* margin-left: 40px; */
  /* width: 280px; */
}

.popper-class {
  display: flex;
}

.LoginUsernameInput {
  margin-top: 20px;
}

.mainRight {
  height: 100%;
  flex: 2;

  @include centered;
}

.login_cht {
  backdrop-filter: blur(0.8px);
  width: 100vw;
  height: 100vh;
  @include centered;
}

.login {
  background: rgba(35, 35, 35, 0.24);
  width: 100vw;
  height: 100vh;
  background: url(../assets/image/login/login-bg.jpg);
  background-size: 100% 100%;
  @include centered;

  &::after {
    content: " ";
    width: 100vw;
    height: 50px;
    @include centered;
    color: rgba(255, 255, 255, 0.5);
    @include pos-ab(auto, 0, 0, 0, 2);
  }
} 

// .registerTarget >>> {

// }
.loginMain {
  width: 1445px;
  height: 648px;
  display: flex;
  flex-direction: row;

  border-radius: 31px 31px 31px 31px;
}
</style>
